<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="yes" name="apple-touch-fullscreen" />
  <meta content="telephone=no,email=no" name="format-detection" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>我的召集</title>
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="./css/qrcode-share.css" />
  <script src="./js/vue.js"></script>
  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
  <script src="./js/flex.js"></script>
</head>
<body>
  <div v-cloak id="app">
    <div class="user">
      <div class="head-box">
        <div class="head">
          <img :src="user.headimg" width="100%" alt="">
        </div>
      </div>
      <div class="info">
        <p>{{ user.nickname }}</p>
        <p>ID: {{ user.uuid }}</p>
      </div>
      <div class="qr-code" @click="showQrCodeDialog(true)">
      </div>
    </div>
    <div class="earnings-box">
      <div class="earnings">
        <div class="desc">
          <p>累计召集收益 <i class="icon-diamond"></i><span> {{ user.grand_total }} </span></p>
          <p>本月召集收益 <i class="icon-diamond"></i><span> {{ user.current_month_total }} </span></p>
        </div>
        <div class="detail" @click="toDetail()">
          明细 >
        </div>
      </div>
    </div>
    <div class="carousel">
      <div class="bell"></div>
      <div class="msg">
        <!-- <transition-group tag="ul" name="image"> -->
          <!-- <ul>
          <li class="carousel-child" v-for="(item,index) in carouselData" :key="'dd-'+index">
            恭喜{{ item.invite.nickname }} 获得一笔召集收益 {{ item.award_diamond }}钻
          </li>
          </ul> -->
        <!-- </transition-group> -->
        <p ref="carousel"><span v-for="(item,index) in carouselData">恭喜{{ item.invite.nickname }} 获得一笔召集收益 {{ item.award_diamond }}钻 </span></p>
      </div>
    </div>
    <div class="my-call-title">
      <span>已召集 ({{ beCalledLen }}人)</span><span>累计返钻奖励</span>
    </div>
    <div class="my-call">
      <div class="my-call-list">
        <table v-if="beCalledLen > 0">
          <tbody>
            <tr v-for="(item, index) in lists" :key="'be-called-info-'+ index">
              <td class="be-call-user">
              <div class="be-call-head">
                <img :src="item.portrait" width="100%" alt="">
              </div>
              <div class="be-call-info">
                <p>{{item.nickname}}</p>
                <p @click="showHeZhaojiDialog(true, item.user)">他的召集 ></p>
              </div>
              </td>
              <td class="be-call-diamond">
              <i class="icon-diamond"></i><span>{{ item.award_diamond }}</span>
              </td>
            </tr>
          </tbody>
        </table>
        <div v-else class="no-list">
          <p class="no-desc">邀请好友加入声撩</p>
          <p class="no-desc">可以获得召集收益啦</p>
          <div class="no-fan">
            <div class="tip"></div>
            <div class="no-fan-desc">每召集一位用户加入声撩，可以收到</div>
            <div class="no-fan-desc">其充值额3%返钻</div>
          </div>
        </div>
      </div>
     
    </div>
    <div class="btn" @click="toShareNoQrcode()">
      邀请好友享召集收益
    </div>

    <!-- 二维码弹出层 -->
    <div v-show="qrCodeShow" class="qr-code-dialog">
      <div class="close" @click="showQrCodeDialog(false)"></div>
      <div class="head">
      </div>
      <div class="qr-code" id="qrcode">
      </div>
      <p class="desc1">邀请好友加入声撩可以获得召集收益啦</p>
      <p class="desc2">每召集一位用户加入声撩,可收到</p>
      <p class="desc3">其充值额3%返钻</p>
      <div class="share-qrcode-btn" @click="down()">分享二维码</div>
    </div>
    <!-- end -->

    <!-- 他的召集 -->
    <div v-show="heZhaojiShow" id="he-zhaoji-dialog">
      <div class="close" @click="showHeZhaojiDialog(false)"></div>
      <div class="he-headimg">
        <img :src="heInfo.portrait" width="100%" alt="">
      </div>
      <p class="nickname">{{ heInfo.nickname }}</p>
      <div class="has-been-call">
        <p class="been-call-number"> {{ heInfo.user_total }} </p>
        <p class="been-call-desc">已召集</p>
      </div>
      <div class="grand-call">
        <p class="been-call-number"><i class="icon-diamond"></i> {{ heInfo.award_diamond_total }} </p>
        <p class="been-call-desc">累计收益</p>
      </div>
      <div class="clearfix"></div>
      <p class="register-time">注册时间: <time> {{ heInfo.created_timestamp }} </time></p>
    </div>
    <!-- end -->

    <!-- 遮罩层 -->
    <div v-show="overlayShow" class="overlay"></div>
    <!-- end -->

    <!-- 分享二维码 -->
    <div v-show="qrCodeShow" class="main">
      <img src="./images/bg2x.png" width="100%" alt="">
      <div class="logo"></div>
      <div class="content">
        <!-- <div class="head" id="head-img-1"> -->
          <!-- <img class="head-img" src="http://ztaudio-res.whzcth.com/album/image/41/956f187c-efd1-11e9-80d1-0242ac110004.jpg" width="100%" alt=""> -->
        <!-- </div> -->
        <div class="main-head">
        </div>
        <p class="nickname"></p>
        <div class="qr-code" id="qrcode1"></div>
      </div>
    </div>
    <!-- end -->

    <!-- 活动结束弹窗 -->
    <div id="over-dialog" v-show="canShowOverDialog">
      <div class="close" @click="showOverDialog(false)"></div>
      <p>嗷~~，当前活动已截止</p>
      <p>仅支持查看历史活动记录</p>
      <div class="btn" @click="showOverDialog(false)">
        知道啦
      </div>
    </div>
    <!-- end -->
    <!-- 复制到剪切板弹窗 -->
    <div id="over-dialog" v-show="canShowCopyDialog">
      <div class="close" @click="showCopyDialog(false)"></div>
      <p></p>
      <p>复制链接到浏览器，打开你的邀请令</p>
      <button class="tag-read btn" :data-clipboard-text="message" @click="copy">复制链接</button>
    </div>
    <!-- end -->
  </div>
</body>
<script src="./js/qrcode.min.js"></script>
<script src="./js/tool.js"></script>
<script src="js/clipboard.min.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      overlayShow: false,   // 控制遮罩层显示、隐藏
      qrCodeShow: false,    // 控制二维码弹框显示、隐藏
      heZhaojiShow: false,  // 控制他的召集弹框显示、隐藏
      canShowOverDialog: false,
      canGenerateQRCode: true,
      user: {
        nickname: '',
        headimg: '',
        qrCode: '',
        uuid: '',
        register_at: '',
        code: '',
        grand_total: 0,
        current_month_total: 0,
        user_id: 0,
        channel_id: ''
      },
      heInfo: {
        nickname: '',
        user_total: 0,
        award_diamond_total: 0,
        created_timestamp: 0,
        portrait: ''
      },
      lists: [],
      baseUrl: 'http://47.103.212.118:5084', // 测试服',
      qrCodeObj: null,
      isStart: false,
      carouselData: [],
      time: '',
      num: 0,
      maxNum:0,
      message: '',
      canShowCopyDialog: false
    },
    computed: {
      beCalledLen: function() {
        return this.lists.length;
      },
      qrcodeUrl: function(){
        return this.baseUrl + "/zhaoji/share.html";
      },
      textUrl: function(){
        return this.baseUrl + "/zhaoji/share.html";
      }
    },
    mounted() {
      this.init()

    },
    methods: {
      init() {
        let _this = this
        try{
          kk.ajaxGet("./config.json", {}, function(res) {
            let {devUrl, proUrl, localUrl, env} = res
            kk.env = env
            if(env === "dev") {
              _this.baseUrl = devUrl
            } else if(env === "production"){
              _this.baseUrl = proUrl
            } else if(env === "local") {
              _this.baseUrl = localUrl
            }
            // _this.baseUrl = localUrl
            _this.canStart()

            setTimeout(() => {
              _this.carousel() 
            }, 1000);

            setTimeout(() => {
              
              _this.getInviteUser()
            }, 2000);
            
            // _this.play()
          })
        }catch(error) {
          alert(error)
        }
      },
      
      play(){
          this.time=setInterval(()=>{
              this.num++;
              if(this.num==this.maxNum){
                  this.num=0
              }

          },2000)
      },
      canStart() {
        let _this = this
        kk.get(this.baseUrl + '/convene/init', {}, function(res) {
          if(kk.env === 'production') {
            res = kk.parseBase64(res)
          }
          _this.isStart = res.data.isStart
          if(_this.isStart === false) {
            _this.showOverDialog(true)
          }
        });
      },
      // 获取召集人信息
      getInviteUser(){
        let _this = this
        kk.get(this.baseUrl + "/convene/invite/" + kk.$_GET['user_id'], {}, function(res) {
          if(kk.env === 'production') {
            res = kk.parseBase64(res)
          }
          if(res.code == 200) {
            let { user_id, nickname, portrait, uuid, create_time, code ,channel_id} = res.data.user_info
            _this.user = Object.assign({ nickname: nickname, headimg: portrait, uuid: uuid, register_at: create_time, code: code, grand_total: res.data.grand_total, current_month_total: res.data.current_month_total, user_id: user_id, channel_id: channel_id})
            _this.lists = res.data.be_called_info; 
          }
        });
      },
      generateQrCode(elem){
          let objElem = document.getElementById(elem)
          let width = window.getComputedStyle(objElem).width
          width = width.replace(/px/, '')
          let qrCodeObj = new QRCode(
            elem,
            {
              text: this.qrcodeUrl + "?code=" + this.user.code,
              width: width,
              height: width,
              colorDark : "#000000",
              colorLight : "#ffffff",
              correctLevel : QRCode.CorrectLevel.H
            }
          )
      },
      carousel() {
        let _this = this
        kk.get(_this.baseUrl + "/convene/carousel", {}, function(res) {
          if(kk.env === 'production') {
            res = kk.parseBase64(res)
          }
          _this.carouselData = res.data
          _this.maxNum = res.data.length
        })
      },
      showQrCodeDialog(state) {
        this.overlayShow = state
        this.qrCodeShow = state
        if(this.canGenerateQRCode === true){
          this.canGenerateQRCode = false
          this.generateQrCode("qrcode")
          this.generateQrCode("qrcode1");
          this.getBase64(this.user.headimg);
        }
      },
      showOverDialog(state) {
        this.overlayShow = state
        this.canShowOverDialog = state
      },
      showHeZhaojiDialog(state, user) {
        this.heZhaojiShow = state
        this.overlayShow = state
        let _this = this;
        kk.get(this.baseUrl + "/convene/statistics/" + user.user_id, {}, function(res) {
          if(kk.env === 'production') {
            res = kk.parseBase64(res)
          }
          let { user_total, award_diamond_total } = res.data;
          _this.heInfo = Object.assign({}, {
            user_total: user_total,
            award_diamond_total: award_diamond_total,
            created_timestamp: user.create_timestamp,
            portrait: user.portrait,
            nickname: user.nickname
          })
        })
      },
      toShareQrCode() {
        kk.share(this.user.headimg,'高颜值的小伙伴，还能秀才艺得收益，同好朋友一起约玩不停','小哥哥、小姐姐正等你加入一起约玩~', this.qrcodeUrl)
      },
      toShareNoQrcode() {
        if (this.user.headimg && this.user.code) {
          if(this.user.channel_id == 600500){
            this.canShowCopyDialog = true
            this.download()
          }else{
            kk.share(this.user.headimg,'高颜值的小伙伴，还能秀才艺得收益，同好朋友一起约玩不停','小哥哥、小姐姐正等你加入一起约玩~', this.textUrl + "?code=" + this.user.code)
          }
        }     
      },
      showCopyDialog( status ) {
        this.canShowCopyDialog = status
      },
      copy() {
        var clipboard = new Clipboard('.tag-read')
        clipboard.on('success', e => {
          // console.log('复制成功')
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          // console.log('该浏览器不支持自动复制')
          // 释放内存
          clipboard.destroy()
        })
        this.canShowCopyDialog = false
      },
      download() {
      if (/(iPhone|iPad|iPod|iOS)/i.test( navigator.userAgent)) {
          // this.redirect_url = "http://fir.kekestar.cn/j6fd"
          this.redirect_url = "https://apps.apple.com/cn/app/id1537978739"
          window.location.href = this.redirect_url
      } else {
          if (navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1) {
              document.getElementById("main").style.display = "none"
              document.getElementsByClassName("background-image")[0].style.display = "block"
          }else{
            this.redirect_url = "https://ztaudio-api.kekestar.cn/system/version/get?channel_id=600000"
          }
        this.message = this.redirect_url
      }
    },
      toDetail() {
        location.href = './detail.html?user_id=' + this.user.user_id
      },
      down(){
        setTimeout(() => {
          //这个函数是点击下载执行的方法      
          html2canvas(document.getElementsByClassName('main')[0],{ //这是使用了html2canvas这个插件的方法，将class为whole的整个节点绘制成画布
            useCORS: true, //（图片跨域相关）
            allowTaint: false, //允许跨域（图片跨域相关）
            onrendered:function(canvas){  //画布绘制完成后执行下面内容，function内的canvas这个参数就是已经被绘制成画布          
              // var link = document.createElement('a');//创建一个a标签        
              // link.download = 'my-image-name.jpg';//a标签增加一个download属性，属性值（my-image-name.jpg）就是合成下载后的文件名       
              // link.href = canvas.toDataURL();//canvas.toDataURL()就是画布的路径，将路径赋给a标签的href         
              // link.click();//模拟a标签被点击，这样就可以下载了  
              let base64Img = canvas.toDataURL()
              // console.log(base64Img)
              if(kk.isAndroid){
                keke.shareImage(base64Img);
              } else if(kk.isIos){
                window.webkit.messageHandlers.shareImage.postMessage(base64Img);
              } 
            },   
          })
        }, 500)
      },
      getBase64(imgUrl) {
        window.URL = window.URL || window.webkitURL;
        var xhr = new XMLHttpRequest();
        xhr.open("get", imgUrl, true);
        // 至关重要
        xhr.responseType = "blob";
        xhr.onload = function () {
          if (this.status == 200) {
            //得到一个blob对象
            var blob = this.response;
            // 至关重要
            let oFileReader = new FileReader();
            oFileReader.onloadend = function (e) {
              let base64 = e.target.result;
              base64 = base64.replace(/application\/octet-stream;/, "image/png;")
              let img = document.createElement("img")
              img.setAttribute("src", base64)
              img.setAttribute("width", '100%')
              img.setAttribute("crossOrigin", "anonymous")
              document.getElementById('head-img-1').appendChild(img)
            };
            oFileReader.readAsDataURL(blob);
            // console.log(base64)
          }
        }
        xhr.send();
      }
    }
  })
</script>
</html>